<template>
  <div>
    <a-spin :spinning="spinning">
      <div style="margin:50px auto;width:40%;">
      <div class="nodata" v-if="this.all.length == 0 && this.withdraw == null && this.account == null">
        暂无数据
      </div>
        <a-row class="titleSty" v-if="this.all.length!=0">
          <a-col :span="7">
            <h3>收款限额</h3>
          </a-col>
          <a-col>
            <table>
              <tr v-for="items in all" :key="items.transCode">
                <td>
                  <span>单笔： &lt;{{items.singleAmountLimit/1000000}}万</span>
                </td>
                <td><span>单日： &lt;{{items.dayAmountLimit/1000000}}万</span></td>
              </tr>
            </table>
          </a-col>
        </a-row>
        <a-row style="margin-top:20px" v-if="this.withdraw!=null">
          <a-col class="titleSty">
            <h3>代付限额</h3>
          </a-col>
          <a-col>
            <table>
              <tr>
                <td>
                  <span>单笔： &lt;{{withdraw.singleAmountLimit/1000000}}万</span>
                </td>
                <td><span>单日： &lt;{{withdraw.dayAmountLimit/1000000}}万</span></td>
              </tr>
            </table>
          </a-col>
        </a-row>
        <a-row style="margin-top:20px" v-if="this.account!=null">
          <a-col class="titleSty">
            <h3>余额付款限额</h3>
          </a-col>
          <a-col>
            <table>
              <tr>
                <td>
                  <span>单笔： &lt;{{account.singleAmountLimit/1000000}}万</span>
                </td>
                <td><span>单日： &lt;{{account.dayAmountLimit/1000000}}万</span></td>
              </tr>
            </table>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>

<script>
  import AForm from "ant-design-vue/es/form/Form";
  import ATabs from "ant-design-vue/es/tabs";

  import AFormItem from "ant-design-vue/es/form/FormItem";
  import AInput from "ant-design-vue/es/input/Input";
  import AIcon from "ant-design-vue/es/icon";
  import AInputGroup from "ant-design-vue/es/input/Group";
  import AButton from "ant-design-vue/es/button/button";
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
  import AAlert from "ant-design-vue/es/alert/index";
  import api from "@/common/api";
  const ATabPane = ATabs.TabPane;

  export default {
    name: "Login",
    components: {
      AAlert,
      ACheckbox,
      ACol,
      ARow,
      AButton,
      AInputGroup,
      AIcon,
      AInput,
      AFormItem,
      ATabPane,
      ATabs,
      AForm
    },
    data() {
      return {
        visible: false,
        form: this.$form.createForm(this),
        error: "",
        loginpwd: '',
        loginpwd2: '',
        login: false,
        spinning: false,
        query: {},
        all: [],
        account: null,
        withdraw: null,
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 7 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 10 }
          }
        }
      };
    },
    watch: {},
    computed: {},
    mounted() {
      this.spinning = true;
      this.handleSearch()
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      handleSearch() {
        this.query.configType = "limit";

        console.info(this.query)
        api.coustromLimitOrg(this.query, res => {
          console.info(res)
          if (res.code == "OK") {
            if (res.data.all != null) { this.all = res.data.all; }
            if (res.data.account != null) { this.account = res.data.account }
            if (res.data.withdraw != null) { this.withdraw = res.data.withdraw }
            this.spinning = false
          }
          else {
            this.spinning = false;
          }
        })
      },
      gologin() {
        this.visible = false;
        this.$router.push("/home");
      },
    }
  };
</script>

<style lang="less" scoped>
  .nodata{
    text-align: center;
    display: flex;
    height: 60vh;
    align-items: center;
    justify-content: center;
  }
  span {
    cursor: pointer;
    margin-left: 30px;
    color: #98989e;
  }

  h3 {
    font-weight: bold;
    margin-bottom: 30px;
    font-size: 18px;
  }

  .titleSty {
    margin: 0 auto;
    width: 85%;
    text-align: left;
  }

  .formGroupTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .ant-tabs-nav {
    float: right;
  }

  .content4 {
    display: flex;
    margin-bottom: 20px;

    .conleft {
      font-size: 16px;
      font-weight: 600;
      width: 180px;
    }

    .conright {
      padding: 0 20px;

      span {
        margin-right: 20px;
      }
    }
  }

  tr {
    text-align: left;
    font-size: 16px;
    height: 40px;
  }

  table {
    margin: 0 auto;
    width: 600px
  }

  table td {
    border: 1px solid #b7b7b7
  }

  table tr:nth-child(even) {
    background: #F7F9FC;
  }
</style>